<template>
  <div id="identity">
    <!-- 顶部导航栏 -->
    <van-nav-bar class="navbar" @click-left="onClickLeft" fixed>
      <template #left>
        <van-icon name="arrow-left" class="left"/>
      </template>
      <template #title>
        <div class="title">身份信息认证</div>
      </template>
    </van-nav-bar>
    <div class="all">
      <van-cell title="普通人认证" label="请上传正反身份证照片">
        <template #right-icon>
          <van-uploader :after-read="afterReadFirst" :before-delete="beforeDeleteF" v-model="peopleFileList" max-count="2"/>
        </template>
      </van-cell>
      <van-cell title="学生认证" label="请上传学生证照片">
        <template #right-icon>
          <van-uploader :after-read="afterReadSecond" v-model="studentFileList" max-count="1"/>
        </template>
      </van-cell>
      <van-cell title="商家认证" label="请上传营业执照照片">
        <template #right-icon>
          <van-uploader :after-read="afterReadThird" v-model="shopFileList" max-count="1"/>
        </template>
      </van-cell>
    </div>
     <div class="identity">
      <van-button type="primary" round @click="identityClick" :disabled="disable">认证确认</van-button>
    </div>
  </div>
</template>

<script>
import { Toast } from 'vant';
export default {
  name: 'Identity',
  data () {
    return {
      peopleFileList: [],
      studentFileList: [],
      shopFileList: [],
       fileNameCountF:[],
       fileNameCountS:[],
       fileNameCountT:[],
       disable:true
    }
  },
  methods: {
    onClickLeft() {
      this.$router.go(-1)
    },
    afterReadFirst(file) {
      // 此时可以自行将文件上传至服务器
      var formData = new FormData();
      formData.append('file',file.file);
      Toast.loading({
        message: '加载中...',
        forbidClick: true,
      });
      this.axios({
          method: "post",
          url: this.$store.state.url+"/picture",
          headers:{
           "Content-Type": "multipart/form-data",
           'Authorization': localStorage.token,
                },
          data:formData,
      }).then((res) => {
        console.log(res.data);
        Toast.success('上传成功');
        Toast.clear();
        this.fileNameCountF.push(res.data.data.file_name);
        this.disable = false
        console.log(this.fileNameCountF);
      }).catch((err) => {
          console.log(err);
      })
    },
    beforeDeleteF(file){
        console.log(file)
        for(var t in this.peopleFileList){
          if(file.file ==this.peopleFileList[t].file){
                console.log(t);
                if(this.fileNameCountF[t]){
                this.fileNameCountF.splice(t,1);
                console.log(this.fileNameCountF);
                }
                return true;
          }
        }
        // return true;
    },    
    afterReadSecond(file) {
      // 此时可以自行将文件上传至服务器
      var formData = new FormData();
      formData.append('file',file.file);
      Toast.loading({
        message: '加载中...',
        forbidClick: true,
      });
      this.axios({
          method: "post",
          url: this.$store.state.url+"/picture",
          headers:{
           "Content-Type": "multipart/form-data",
           'Authorization': localStorage.token,
                },
          data:formData,
      }).then((res) => {
        console.log(res.data);
        Toast.success('上传成功');
        Toast.clear();
        this.fileNameCountS.push(res.data.data.file_name);
        this.disable = false
        console.log(this.fileNameCountS);
      }).catch((err) => {
          console.log(err);
      })
    },
    beforeDeleteS(file){
        console.log(file)
        for(var t in this.studentFileList){
          if(file.file ==this.studentFileList[t].file){
                console.log(t);
                if(this.fileNameCountS[t]){
                this.fileNameCountS.splice(t,1);
                console.log(this.fileNameCountS);
                }
          }
        }
    },
    afterReadThird(file) {
      // 此时可以自行将文件上传至服务器
      var formData = new FormData();
      formData.append('file',file.file);
      Toast.loading({
        message: '加载中...',
        forbidClick: true,
      });
      this.axios({
          method: "post",
          url: this.$store.state.url+"/picture",
          headers:{
           "Content-Type": "multipart/form-data",
           'Authorization': localStorage.token,
                },
          data:formData,
      }).then((res) => {
        console.log(res.data);
        Toast.success('上传成功');
        Toast.clear();
        this.disable = false
        this.fileNameCountT.push(res.data.data.file_name);
        console.log(this.fileNameCountT);
      }).catch((err) => {
          console.log(err);
      })
    },
    beforeDeleteT(file){
        console.log(file)
        for(var t in this.shopFileList){
          if(file.file ==this.shopFileList[t].file){
                console.log(t);
                if(this.fileNameCountT[t]){
                this.fileNameCountT.splice(t,1);
                console.log(this.fileNameCountT);
                }
          }
        }
    },
  identityed(fileName,classid){
     let params = new URLSearchParams();
      params.append('img',fileName);
      params.append('class',classid);
      this.axios({
          method: "post",
          url: this.$store.state.url+"/auth/user/identification",
          headers:{
           'Authorization': localStorage.token,
                },
          params,
      }).then((res) => {
        console.log(res.data);
      }).catch((err) => {
          console.log(err);
      })
  },
  identityClick(){
      var fileName = {};
      if(this.fileNameCountT.length>0){
      for(var i in this.fileNameCountT){
          fileName[i]=this.fileNameCountT[i];
          
      }
      fileName = JSON.stringify(fileName);
      console.log('商家认证');
     this.identityed(fileName,'1');
     this.$router.push('/user')
    }else if(this.fileNametCountS.length>0){t
       for(var t in this.fileNameCountS){
          fileName[t]=this.fileNameCountS[t];
          
      }
      fileName = JSON.stringify(fileName);
      console.log('学生认证');
     this.identityed(fileName,'2');
     this.$router.push('/user')
    }else if(this.fileNameCountF.length>0){n
       for(var n in this.fileNameCountF){
          fileName[n]=this.fileNameCountF[n];
      }
      fileName = JSON.stringify(fileName);
       console.log('个人认证');
     this.identityed(fileName,'3');
     this.$router.push('/user')
    }
    
  }
  
 }
}
</script>
<style scoped>
  .navbar {
    background: transparent;
    box-shadow: 0 1px 1px #cccccc;
    color: #ffffff;
  }
  .left {
    color: #fff;
    font-size: 20px
  }
  .title {
    color: #fff;
    font-size: 20px;
  }
  .all {
    padding-top: 46px
  }
  .identity {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 20px;
    padding:  10px 0px;
  }
</style>